<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>角色管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
  <script src="/layuiadmin/layui/layui.js"></script>
</head>


<body>
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">角色名</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input" name="roleName">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input" name="remark">
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>

      <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
          <@shiro.hasPermission name="role:add">
            <button class="layui-btn layuiadmin-btn-useradmin" data-type="add">新增</button>
          </@shiro.hasPermission>
          <@shiro.hasPermission name="role:update">
            <button class="layui-btn layuiadmin-btn-useradmin" data-type="update">编辑</button>
          </@shiro.hasPermission>
          <@shiro.hasPermission name="role:select">
            <button class="layui-btn layuiadmin-btn-useradmin" data-type="detail">查看</button>
          </@shiro.hasPermission>
        </div>
        <table id="myTable" lay-filter="myTable"></table>
        <script type="text/html" id="toolBar">
          <@shiro.hasPermission name="role:add">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
          </@shiro.hasPermission>
          <@shiro.hasPermission name="role:update">
            <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="edit">编辑</a>
          </@shiro.hasPermission>
          <@shiro.hasPermission name="role:del">
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
          </@shiro.hasPermission>
        </script>
        <script type="text/html" id="test-table-toolbar-toolbarDemo">
          <div class="layui-btn-container">
          </div>
        </script>
      </div>
    </div>
  </div>
</body>

<script>

  layui.laytpl.toDateString = function(d, format){
    let date = new Date(d || new Date())
            ,ymd = [
      this.digit(date.getFullYear(), 4)
      ,this.digit(date.getMonth() + 1)
      ,this.digit(date.getDate())
    ]
            ,hms = [
      this.digit(date.getHours())
      ,this.digit(date.getMinutes())
      ,this.digit(date.getSeconds())
    ];

    format = format || 'yyyy-MM-dd HH:mm:ss';

    return format.replace(/yyyy/g, ymd[0])
            .replace(/MM/g, ymd[1])
            .replace(/dd/g, ymd[2])
            .replace(/HH/g, hms[0])
            .replace(/mm/g, hms[1])
            .replace(/ss/g, hms[2]);
  };

  //数字前置补零
  layui.laytpl.digit = function(num, length, end){
    let str = '';
    num = String(num);
    length = length || 2;
    for(let i = num.length; i < length; i++){
      str += '0';
    }
    return num < Math.pow(10, length) ? str + (num|0) : num;
  };

  let $ = layui.$;
  layui.config({
    base: '/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index','table'], function(){
    let $ = layui.$
            ,form = layui.form
            ,table = layui.table;

    table.render({
      elem: '#myTable'
      ,toolbar: '#test-table-toolbar-toolbarDemo'
      ,url: 'showRoleList'
      ,totalRow: true
      ,cols: [[
        {checkbox: true, fixed: true}
        , {field: 'roleName', title: '角色名称'}
        , {field: 'remark', title: '角色描述'}
        , {field: 'createDate', title: '创建时间',templet: '<div>{{ layui.laytpl.toDateString(d.createDate,"yyyy-MM-dd HH:mm:ss") }}</div>'}
        , {field: 'remark', title: '操作', toolbar: "#toolBar",width:170}
      ]]
      ,page: true
      ,height: 'full-230'
      ,limit: 30
      ,text: {none: '无数据'}
    });

    //监听搜索
    form.on('submit(search)', function(data){
      let field = data.field;

      //执行重载
      table.reload('myTable', {
        where: field
      });
    });

    //监听工具条
    table.on('tool(myTable)', function (obj) {
      let data = obj.data;
      if (obj.event === 'detail') {
        layer.open({
          type: 2,
          area: [$(window).width()+'px', $(window).height() + 'px'],
          content: 'updateRole?id=' + data.id +"&detail=true"
        });
      } else if (obj.event === 'del') {
        layer.confirm('确定删除角色[<label style="color: #00AA91;">' + data.roleName + '</label>]?', function(){
          $.ajax({
            url: "del",
            type: "post",
            data: {id: data.id},
            success: function (d) {
              if(d.msg){
                layer.msg(d.msg,{icon:6,offset: 'rb',area:['120px','80px'],anim:2});
                layui.table.reload('myTable');
              }else{
                layer.msg(d.msg,{icon:5,offset: 'rb',area:['120px','80px'],anim:2});
              }
            }
          });
        });
      } else if (obj.event === 'edit') {
        layer.open({
          type: 2,
          area: [$(window).width()+'px', $(window).height() + 'px'],
          content: 'updateRole?id=' + data.id
        });
      }
    });

    //事件
    let active = {
      add: function () {
        layer.open({
          type: 2,
          area: [$(window).width()+'px', $(window).height() + 'px'],
          content: 'showAddRole'
        });
      },
      update: function () {
        let checkStatus = table.checkStatus('myTable')
                , data = checkStatus.data;
        if (data.length != 1) {
          layer.msg('请选择一行编辑', {icon: 5});
          return false;
        }
        layer.open({
          type: 2,
          area: [$(window).width()+'px', $(window).height() + 'px'],
          content: 'updateRole?id=' + data[0].id
        });
      },
      detail: function () {
        let checkStatus = table.checkStatus('myTable')
                , data = checkStatus.data;
        if (data.length != 1) {
          layer.msg('请选择一行查看', {icon: 5});
          return false;
        }
        layer.open({
          type: 2,
          area: [$(window).width()+'px', $(window).height() + 'px'],
          content: 'updateRole?id=' + data[0].id +"&detail=true"
        });
      }
    };

    $('.layui-btn.layuiadmin-btn-useradmin').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

  });

</script>

</html>
